/*
 * @Author: zhouc 
 * @Date: 2024-04-19 09:55:31 
 * @Function: 打分页面
 * @Last Modified by: zhouc
 * @Last Modified time: 2024-04-24 19:42:07
 */
<template> 
  <div class="enter-behavior-container">
    <div class="class-card">
      <div class="card-box">
        <div class="left">
          <div class="class-name">{{ rec.queryObj?.classes }}</div>
          <div class="name">班主任：{{ rec.teacherName || "-" }}</div>
        </div>
      </div>
    </div> 
    <div class="form-box"> 
      <div class="form-title">评价信息</div>
      <div class="repair-item" @click="handleSelectTime">
        <div class="desc">
          <span class="word">发生时间</span>
          <span class="tip">*</span>
        </div>
        <div class="right">
          <span v-if="!rec.time">请选择发生时间</span>
          <span v-else style="color: #303233">{{ rec.time }}</span>
          <van-icon name="arrow" />
        </div>
      </div>

      <div
        class="repair-item"
        @click="
          () => {
            rec.showTimePicker = false;
            router.push(
              `/behaviorSelect?value=${
                store.state.setEvaluate.selectBehavior?.description || ''
              }`
            );
          }
        "
      >
        <div class="desc">
          <span class="word">行为</span>
          <span class="tip">*</span>
        </div>
        <div class="right">
          <span v-if="!store.state.setEvaluate.selectBehavior?.description"
            >请选择行为</span
          >
          <span v-else style="color: #303233">{{
            store.state.setEvaluate.selectBehavior?.description
          }}</span>
          <van-icon name="arrow" />
        </div>
      </div>

      <div class="repair-item">
        <div class="desc">
          <span class="word">分数</span>
          <span class="tip">*</span>
        </div>
        <div class="right">
          <span
            v-if="!store.state.setEvaluate.selectBehavior?.score"
            style="margin-right: 0"
            >选择行为后自动计算</span
          >
          <span
            v-else
            :style="{
              color:
                store.state.setEvaluate.selectBehavior?.score > 0
                  ? '#00c294'
                  : '#fa5646',
            }"
          >
            {{
              store.state.setEvaluate.selectBehavior?.score > 0
                ? "+" + store.state.setEvaluate.selectBehavior?.score
                : store.state.setEvaluate.selectBehavior?.score
            }}</span
          >
        </div>
      </div>

      <van-cell-group>
        <van-field
          v-model="rec.behaviorDesc"
          rows="2"
          autosize
          label=""
          type="textarea"
          maxlength="255"
          placeholder="您可以补充说明情况（选填）"
          show-word-limit
        />
      </van-cell-group>

      <van-datetime-picker
        v-show="rec.showTimePicker"
        v-model="rec.currentDate"
        type="datetime"
        title="日期时间选择"
        :formatter="formatter"
        @cancel="rec.showTimePicker = false"
        @confirm="handleTimeConfirm"
      />

      <Upload ref="uploadRef" />
    </div>

    <div class="btn">
      <van-button block class="cancel" @click="router.back()">取消</van-button>
      <van-button type="primary" block class="submit-btn" @click="submitData"
        >提交</van-button
      >
    </div>

    <router-view class="behavior-select"></router-view>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import router from "@/router";
import { useRoute } from "vue-router";
import Upload from "@/components/upload";
import dayjs from "dayjs";
import { Toast } from "vant";
import { addInspection, queryAllTeacher } from "@/service/modules/evaluation";
import LocalCache from "@/utils/cache";
import { useStore } from "@/store";

document.title = "打分";

const store = useStore();

const route = useRoute();

const uploadRef = ref();

const { name, personId } = LocalCache.getSession("userInfo");
const gradeList = LocalCache.getSession("gradeList");

const rec = reactive({
  time: "",
  behavior: "",
  score: "",
  behaviorDesc: "",
  currentDate: new Date(),
  showTimePicker: false,
  teacherName: "",
});

onMounted(() => {
  rec.queryObj = route.query;

  let classId = "";
  gradeList.forEach((item) => {
    item.children.forEach((item2) => {
      if (item2.unitName === route.query.classes) {
        classId = item2.unitId;
      }
    });
  });

  queryAllTeacher({
    classId,
  }).then((res) => {
    if (res.code === 0) {
      rec.teacherName = res.data?.teacherName;
    }
  });
});

const handleSelectTime = () => {
  rec.showTimePicker = !rec.showTimePicker;
};

const handleTimeConfirm = (value) => {
  rec.time = dayjs(value).format("YYYY-MM-DD HH:mm:ss");
  rec.showTimePicker = false;
};

// 提交数据
const submitData = async () => {
  if (!rec.time) {
    Toast.fail("请选择发生时间");
    return false;
  }

  if (!store.state.setEvaluate.selectBehavior?.description) {
    Toast.fail("请选择行为");
    return false;
  }

  const res = await addInspection({
    ...rec.queryObj,
    operatorRecordS: [
      {
        operaTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
        operator: name,
        operaType: "录入",
        reason: rec.behaviorDesc,
      },
    ],
    inspector: name,
    inspectorCode: personId,
    gradeId: route.query.gradeId,
    classId: route.query.classesId,
    behaviorCategory: store.state.setEvaluate.selectBehavior?.category,
    behaviorDetail: store.state.setEvaluate.selectBehavior?.description,
    behaviorId: store.state.setEvaluate.selectBehavior?.id,
    behaviorName: store.state.setEvaluate.selectBehavior?.categoryName,
    behaviorScore: store.state.setEvaluate.selectBehavior?.score,
    createTime: rec.time,
    modifyTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    images: uploadRef.value.rec.fileUrls,
    remark: rec.behaviorDesc,
  });

  if (res.code === 0) {
    Toast.success("提交成功");
    store.commit("setEvaluate/changeSucceccScoring", {
      ...rec.queryObj,
      behaviorScore: store.state.setEvaluate.selectBehavior?.score,
    });
    router.back();
  }
};

const formatter = (type, val) => {
  if (type === "month") {
    return `${val}月`;
  }
  if (type === "day") {
    return `${val}日`;
  }
  return val;
};
</script>

<style lang="less" scoped>
.enter-behavior-container {
  width: 100%;

  .class-card {
    padding: 16px;

    .card-box {
      height: 100%;
      background-image: url(~@/assets/img/card_bg.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      border-radius: 10px;
      padding: 24px 0 24px 16px;
      color: #fff;
      display: flex;
      justify-content: space-between;

      .left {
        .class-name {
          font-size: 16px;
          font-weight: 500;
          line-height: 22px;
        }

        .name {
          font-size: 12px;
          line-height: 17px;
          margin-top: 8px;
        }
      }
    }
  }

  .form-box {
    padding: 0 16px;

    .form-title {
      color: #303233;
      line-height: 20px;
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 8px;
    }

    .repair-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f5f5f5;
      font-size: 14px;

      .tip {
        color: red;
      }

      .desc {
        display: flex;
        align-items: center;
        width: 74px;
      }

      .word {
        line-height: 50px;
        color: #303233;
        white-space: pre;
      }

      .right {
        max-width: 300px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: #c5c5c5;

        span {
          margin-right: 8.75px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    /deep/ .van-cell-group {
      margin: 16px 0;
      border: 1px dotted #e1e5ea;
      border-radius: 4px;

      .van-field {
        height: 144px;
        padding: 8px 12px 0 12px;

        textarea {
          height: 102px !important;
        }

        textarea::placeholder {
          font-size: 14px;
          line-height: 22px;
          color: #c2c6cc;
          letter-spacing: 1px;
        }

        .van-field__word-limit {
          font-size: 14px;
          line-height: 22px;
          color: #c5c5c5;
        }
      }
    }

    /deep/ .van-uploader {
      margin-top: 0;
    }

    /deep/ .van-datetime-picker {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100vw;
      z-index: 9999;
    }
  }

  .btn {
    padding: 0 16px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;

    button {
      border-radius: 40px;

      .van-button__text {
        font-size: 14px;
        font-weight: 500;
      }
    }

    .submit-btn {
      background: #3e77fa;

      .van-button__text {
        color: #fff;
      }
    }

    .cancel {
      margin-right: 23px;

      /deep/ .van-button__text {
        color: #919599;
      }
    }
  }

  .behavior-select {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    overflow: auto;
  }
}
</style>
